<template>
    <div class="ma-content-block lg:flex justify-between p-4">
        <div class="app-container">
            <div class="container-header">
                <div class="container-header-tr">
                    <div>
                        <a-button type="primary" @click="importAcc">
                            {{ $t('basics.daochu') }}
                        </a-button>
                        <!-- <div @click="resetButton" class="btn mr20">
                            <icon-refresh class="mr6" />{{ $t('basics.reset') }}
                        </div> -->
                        <!-- <div @click="importAcc" class="btn">
                            {{ $t('basics.daochu') }}
                        </div> -->
                    </div>
                    <div>
                        <span class="s1">{{ $t('basics.status') }}</span>
                        <a-select
                            v-model="form.status"
                            :style="{ width: '120px' }"
                            :placeholder="$t('basics.textStatus')"
                            allow-clear
                        >
                            <a-option
                                :label="$t('basics.weifasong')"
                                :value="1"
                            ></a-option>
                            <a-option
                                :label="$t('basics.fasongzhong')"
                                :value="2"
                            ></a-option>
                            <a-option
                                :label="$t('basics.yifasong')"
                                :value="3"
                            ></a-option>
                            <a-option
                                :label="$t('basics.shibai')"
                                :value="4"
                            ></a-option>
                        </a-select>
                    </div>
                    <div>
                        <!-- <div @click="searchButton" class="btn mr20">
                            <icon-search class="mr6" />{{ $t('basics.search') }}
                        </div> -->
                        <a-button
                            class="mr20"
                            type="primary"
                            @click="searchButton"
                        >
                            <icon-search class="mr6" />
                            {{ $t('basics.search') }}
                        </a-button>
                        <a-button
                            class="mr20"
                            type="secondary"
                            @click="resetButton"
                        >
                            <icon-refresh class="mr6" />
                            {{ $t('basics.reset') }}
                        </a-button>
                    </div>
                </div>
                <!-- <a-form :model="form">
                <a-row :gutter="16" class="items-center">
                    <a-col :span="7">
                        <a-button
                            type="primary"
                            @click="resetButton"
                            class="reset"
                        >
                            <template #icon><icon-refresh /></template>
                            {{ $t('basics.reset') }}
                        </a-button>
                        <a-button
                            type="primary"
                            class="ml-3 export"
                            @click="importAcc"
                        >
                            {{ $t('basics.daochu') }}
                        </a-button>
                    </a-col>

                    <a-col :span="7">
                        <a-form-item
                            field="status"
                            :label="$t('basics.status')"
                            label-col-flex="10px"
                            class="m-[0px]"
                        >
                            <a-select
                                v-model="form.status"
                                :style="{ width: '320px' }"
                                :placeholder="$t('basics.textStatus')"
                                allow-clear
                            >
                                <a-option
                                    :label="$t('basics.weifasong')"
                                    :value="1"
                                ></a-option>
                                <a-option
                                    :label="$t('basics.fasongzhong')"
                                    :value="2"
                                ></a-option>
                                <a-option
                                    :label="$t('basics.yifasong')"
                                    :value="3"
                                ></a-option>
                                <a-option
                                    :label="$t('basics.shibai')"
                                    :value="4"
                                ></a-option>
                            </a-select>
                            <div>
                            </div>
                        </a-form-item>
                    </a-col>
                    <a-col :span="1" class="items-center">
                        <a-button
                            type="primary"
                            @click="searchButton"
                            style="background: #4780ff"
                        >
                            <template #icon><icon-search /></template>
                            {{ $t('basics.search') }}
                        </a-button>
                    </a-col>
                </a-row>
            </a-form> -->
            </div>
            <div class="container-content mt10">
                <div class="container-content-table">
                    <a-table
                        :loading="loading"
                        :columns="columns"
                        :data="tableList"
                        row-key="id"
                        :pagination="false"
                    >
                        <template #status="{ record }">
                            <span v-if="record.status == 1">{{
                                $t('basics.weifasong')
                            }}</span>
                            <span v-if="record.status == 2">{{
                                $t('basics.fasongzhong')
                            }}</span>
                            <span v-if="record.status == 3">{{
                                $t('basics.yifasong')
                            }}</span>
                            <span v-if="record.status == 4">{{
                                $t('basics.shibai')
                            }}</span>
                        </template>
                    </a-table>
                    <div
                        class="_crud-footer mt-5 text-right"
                        ref="crudFooterRef"
                    >
                        <a-pagination
                            :total="pageList.total"
                            show-total
                            show-jumper
                            show-page-size
                            @page-size-change="getList"
                            @change="getList"
                            v-model:current="form.page"
                            v-model:page-size="form.pageSize"
                            style="display: inline-flex"
                            :page-size-options="[10, 20, 50, 100]"
                            :default-page-size="100"
                        />
                    </div>
                </div>
            </div>
            <a-modal
                v-model:visible="visible"
                :render-to-body="false"
                :footer="false"
            >
                <template #title>
                    {{ $t('basics.daochu') }}
                </template>
                <a-form :model="bandForm" ref="bandFormRef">
                    <a-form-item
                        field="num_of_message_available"
                        :label="$t('basics.status')"
                        label-col-flex="80px"
                        validate-trigger="blur"
                    >
                        <a-select
                            v-model="bandForm.status"
                            :style="{ width: '320px' }"
                            :placeholder="$t('basics.textStatus')"
                            allow-clear
                        >
                            <a-option
                                :label="$t('basics.weifasong')"
                                :value="1"
                            ></a-option>
                            <a-option
                                :label="$t('basics.fasongzhong')"
                                :value="2"
                            ></a-option>
                            <a-option
                                :label="$t('basics.yifasong')"
                                :value="3"
                            ></a-option>
                            <a-option
                                :label="$t('basics.shibai')"
                                :value="4"
                            ></a-option>
                        </a-select>
                    </a-form-item>
                </a-form>
                <div class="dialog-foot">
                    <a-button type="primary" style="margin-right: 10px"
                        ><a-link :hoverable="false" @click="handleOk">{{
                            $t('basics.sure')
                        }}</a-link></a-button
                    >
                    <a-button class="mr20" @click="visible = false">{{
                        $t('basics.concel')
                    }}</a-button>
                </div>
            </a-modal>
        </div>
    </div>
</template>
<script setup>
import { reactive, ref, getCurrentInstance, onMounted } from 'vue';
import {
    getListByUser,
    getListByUserDetail
} from '@/api/america/massProduction.js';
import { getProjectList } from '@/api/cloud/client.js';
import commonApi from '@/api/common';
import tool from '@/utils/tool';

import { Message } from '@arco-design/web-vue';
import { useRouter, useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
const { proxy } = getCurrentInstance();
const router = useRouter();
const route = useRoute();
const bandForm = ref({
    status: 1
});
const loadings = ref(false);
const visible = ref(false);
const loading = ref(false);
const columns = [
    {
        title: t('basics.haoma'),
        dataIndex: 'target_phone_number',
        width: 150,
        slotName: 'target_phone_number',
        align: 'left'
    },
    {
        title: t('basics.xixiaoleirong'),
        dataIndex: 'message_content',
        minWidth: 150,
        slotName: 'message_content',
        align: 'left',
        ellipsis: true
    },
    {
        title: t('basics.status'),
        dataIndex: 'status',
        width: 120,
        slotName: 'status',
        align: 'left'
    },
    {
        title: t('basics.sendTime'),
        dataIndex: 'sent_at',
        width: 220,
        slotName: 'sent_at',
        align: 'left'
    }
];

const form = ref({
    status: '',
    task_name: '',
    page: 1,
    pageSize: 100
});
form.value.task_id = route.query.id;
const tableList = ref([]);
const pageList = ref({
    total: 0
});
// 获取列表数据
const getList = () => {
    loading.value = true;
    getListByUserDetail(form.value).then((res) => {
        tableList.value = res.data.items;
        pageList.value = res.data.pageInfo;
        loading.value = false;
    });
};
getList();
// 获取项目列表
const projectList = ref([]);
const getProject = () => {
    getProjectList().then((res) => {
        projectList.value = res.data.items;
    });
};
const importAcc = () => {
    visible.value = true;
};
const handleOk = () => {
    loadings.value = true;
    Message.info(t('basics.qingqiuxiazai'));
    const url = 'client/userTaskDetail/export';
    if (/^(http|https)/g.test(url)) {
        window.open(url);
    } else {
        visible.value = false;
        commonApi
            .download(url, 'get', {
                status: bandForm.value.status,
                task_id: route.query.id
            })
            .then((res) => {
                if (res && !res.message) {
                    loadings.value = false;
                    console.log(res.message);
                    tool.download(res);
                    Message.success(t('basics.qingqiuchenggong'));
                } else {
                    proxy.$message.error(t('basics.shujubucunzai'));
                }
                andForm.value.status = 1;
            });
    }
};

// 搜索
const searchButton = () => {
    getList();
};
const reset = () => {
    form.value.status = '';
    form.value.page = 1;
    form.value.pageSize = 100;
};

const resetButton = () => {
    reset();
    getList();
};
</script>
<script>
export default { name: 'america:taskDetail' };
</script>
<style lang="less" scoped>
@import url('@/style/layout.less');
// :deep(.work-area) {
//     height: 100vh;
//     overflow: hidden !important;
// }
// .search {
//     color: #fff;
//     background: transparent;
//     height: 40px;

//     border-radius: 10px 10px 10px 10px;
// }
// :deep(.arco-pagination-item:hover) {
//     background: #333c4a;
// }
// :deep(.arco-pagination-item-active) {
//     background: #333c4a;
// }
// .export {
//     background: #384252;
//     width: 100px;
//     height: 40px;
//     border-radius: 51px 51px 51px 51px;
// }
// .reset {
//     width: 100px;
//     height: 40px;
//     background: #4780ff;
//     border-radius: 51px 51px 51px 51px;
// }
// .arco-table-th {
//     background-color: transparent;
//     height: 60px;
//     font-weight: 800;
//     color: #fff !important;
// }
// :deep(.arco-table-border .arco-table-tr .arco-table-th) {
//     border-bottom: 1px solid transparent;
//     background: rgba(209, 230, 255, 0.09);
// }
// :deep(.arco-table-td) {
//     background: rgba(51, 59, 72, 0.6);
// }
// :deep(.arco-table-td) {
//     border: 0px solid rgba(51, 59, 72, 0.6);
// }
// :deep(.arco-table-border .arco-table-container) {
//     border: 0px solid #333b48;
// }
// .arco-table-td {
//     height: 60px;
//     // color: red;
// }
// .taskForm {
//     .arco-row {
//         :deep(.arco-form-item-label) {
//             text-align: end;
//             width: 100px;
//             position: relative;
//             top: 6px;
//             color: #fff;
//             font-weight: 600;
//         }
//         :deep(.arco-input-wrapper) {
//             max-width: 260px;
//             height: 40px;
//             border-radius: 15px;

//             //   background: #363942;
//         }
//         :deep(.arco-form-item-content-wrapper) {
//             max-width: 260px;
//         }
//         :deep(.arco-select-view-single) {
//             height: 40px;
//             max-width: 200px;
//             border-radius: 15px;
//         }
//     }
//     :deep(.arco-input-wrapper) {
//         background: #363942;
//     }
//     :deep(.arco-select-dropdown) {
//         background: #565a64 !important;
//         border: 1px solid #565a64;
//     }
//     .btnUpdate {
//         height: 40px;
//         max-width: 100px;
//         border-radius: 20px;
//         display: flex;
//         justify-content: center;
//         align-items: center;
//         font-size: 12px;
//         font-weight: 500;
//         color: #ffffff;
//         cursor: pointer;
//         background: #3976ff;
//     }
//     .btnRefresh {
//         height: 40px;
//         max-width: 100px;
//         border-radius: 20px;
//         display: flex;
//         justify-content: center;
//         align-items: center;
//         font-size: 12px;
//         font-weight: 500;
//         color: #ffffff;
//         cursor: pointer;
//         background: rgba(51, 59, 72, 0.56);
//     }
// }
// .container-formSearch {
//     display: flex;
//     justify-content: space-between;
//     padding: 24px 40px 24px 24px;
// }
// .app-container {
//     .container-content-header {
//         font-weight: 800;
//         border-radius: 20px 20px 20px 20px;
//         background-color: #333b48;
//         height: 50px;
//         display: flex;
//         justify-content: space-between;
//         align-items: center;

//         .tasks {
//             // color: #000000;
//             font-weight: bold;
//             color: #fff;
//             margin-left: 20px;
//             margin-right: 20px;
//         }
//         .refresh {
//             cursor: pointer;
//         }
//     }
//     .container-content-bottom {
//         color: red;
//         text-align: end;
//     }
//     background-color: white;
//     .container-head {
//         padding: 20px;
//         .formButton {
//             display: flex;
//             justify-content: center;
//             align-items: center;
//         }
//     }
// }
// .dialog-foot {
//     text-align: end;
// }
// .container-content {
//     background: rgba(51, 59, 72, 0.56);
//     padding: 28px 22px 24px 19px;
//     margin-right: 40px;
//     margin-left: 24px;
//     border-radius: 20px 20px 20px 20px;

//     .container-content-button {
//         width: 684px;
//         margin-bottom: 10px;
//         .arco-btn {
//             margin-right: 10px;
//         }
//     }
// }
// :deep(
//         .arco-table-hover:not(.arco-table-dragging)
//             .arco-table-tr:not(.arco-table-tr-empty):not(
//                 .arco-table-tr-summary
//             ):hover
//             .arco-table-td:not(.arco-table-col-fixed-left):not(
//                 .arco-table-col-fixed-right
//             )
//     ) {
//     background: rgba(51, 59, 72, 0.56);
// }
// :deep(.arco-table-border .arco-table-tr .arco-table-th) {
//     background: #3e434e;
// }
// :deep(.arco-table-th) {
//     color: #fff;
// }
// :deep(.arco-table-td) {
//     color: #fff;
// }
// :deep(.arco-table-td:hover) {
//     background: #3e434e;
// }
// thead {
//     background: #353e4b;
// }
// th {
//     color: #fff !important;
// }
// .arco-table-th {
//     color: #fff !important;
// }
// :deep(.arco-table-body) {
//     background: transparent !important;
// }
// //分页
// :deep(.arco-pagination-total) {
//     color: #fff;
// }

// :deep(.arco-pagination-jumper-text-goto, .arco-pagination-jumper-prepend) {
//     color: #fff;
// }
// :deep(.arco-select-view-single) {
//     background: #333c4a;
//     color: #fff;
// }
// :deep(.arco-input-wrapper) {
//     background: #333c4a;
//     color: #fff;
// }
// //-------------
// :deep(.arco-select-dropdown) {
//     background: blue !important;
// }

// ::v-deep .taskForm .arco-row[data-v-4b4b67de] .arco-form-item-label {
//     width: 30px;
// }
</style>
